@import "../../style/imports";

.filter-bar {
  $self: &;
  background: #fff;
  height: $tabs-height;
  display: flex;
  align-items: center;
  justify-content: center;
  &__bd {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  &__ft {
    &:empty {
      padding: 0;
    }
  }
  &__item {
    flex: 1;
    text-align: center;
    position: relative;
    .active-bar {
      background: $color-link;
      content: '';
      display: block;
      opacity: 0;
      position: absolute;
      height: 4px;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 20%;
      transition: all .15s ease-in;
    }
    &-text {
      position: relative;
      display: block;
      height: $tabs-height;
      line-height: $tabs-height;
    }
    &-sort {
      .filter-bar__item-text {
        &:before, &:after {
          @include arrow(4px);
          position: absolute;
          right: 40%;
          top: 50%;
          margin-right: -2em;
        }
        &:before {
          // up
          transform: translateY(-100%) rotate(-135deg);
        }
        &:after {
          // down
          transform: translateY(20%) rotate(45deg);
        }
      }
    }
    &-active {
      .active-bar {
        opacity: 1;
        width: 30%;
      }
      &#{$self}__item-sort {
        &-asc {
          .filter-bar__item-text {
            &:before {
              border-color: #21b991;
            }
          }
        }
        &-desc {
          .filter-bar__item-text {
            &:after {
              border-color: #21b991;
            }
          }
        }
      }
    }
  }
}